<template>
  <el-select 
    v-model="selectedOwnerIds" 
    :placeholder="placeholder" 
    :style="{ width: width }"
    filterable
    remote
    :clearable="clearable"
    :multiple="multiple"
    :collapse-tags="collapseTags"
    :collapse-tags-tooltip="collapseTagsTooltip"
    :remote-method="handleOwnerSearch"
    :loading="ownerSearchLoading"
    @change="handleOwnerChange">
    <el-option 
      v-for="item in ownerOptions" 
      :key="item.value" 
      :label="item.label" 
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script setup>
import { ref, watch, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { getOwnerList } from '@/api/modules/owner'
import { debounce } from 'lodash'

// 定义组件属性
const props = defineProps({
  modelValue: {
    type: [Array, String, Object],
    default: () => []
  },
  placeholder: {
    type: String,
    default: '请选择指定货主'
  },
  width: {
    type: String,
    default: '100%'
  },
  // 是否可清空
  clearable: {
    type: Boolean,
    default: true
  },
  multiple: {
    type: Boolean,
    default: true
  },
  collapseTags: {
    type: Boolean,
    default: true
  },
  collapseTagsTooltip: {
    type: Boolean,
    default: true
  },
  // 只查询启用状态的货主
  enableFlag: {
    type: Number,
    default: 1
  },
  // 自定义使用哪个字段作为value值
  valueKey: {
    type: String,
    default: 'recId'
  },
  // 自定义label字段
  labelKey: {
    type: String,
    default: 'cargoOwnerName'
  },
  // 新增：是否启用对象模式（返回完整对象而不是ID）
  objectMode: {
    type: Boolean,
    default: false
  }
})

// 定义组件事件
const emit = defineEmits(['update:modelValue', 'change'])

// 内部状态
const ownerOptions = ref([])
const ownerSearchLoading = ref(false)

// 处理初始值，支持对象模式
const initSelectedValues = computed(() => {
  console.log("启用对象模式",props.objectMode)
  if (props.objectMode) {
    if (props.multiple) {
      // 对象模式多选：从对象数组中提取ID
      if (Array.isArray(props.modelValue)) {
        return props.modelValue.map(item => 
          typeof item === 'object' && item !== null ? (item[props.valueKey] || item.value || '') : item
        );
      }
      return [];
    } else {
      // 对象模式单选：从对象中提取ID
      return typeof props.modelValue === 'object' && props.modelValue !== null 
        ? (props.modelValue[props.valueKey] || props.modelValue.value || '') 
        : props.modelValue;
    }
  } else {
    // 非对象模式，保持原有逻辑
    if (props.multiple) {
      return Array.isArray(props.modelValue) ? [...props.modelValue] : 
        props.modelValue ? [props.modelValue] : [];
    } else {
      return props.modelValue || '';
    }
  }
});

const selectedOwnerIds = ref(initSelectedValues.value)

// 监听外部值变化
watch(() => props.modelValue, (newVal) => {
  if (props.objectMode) {
    // 对象模式处理
    if (props.multiple) {
      // 多选：从对象数组中提取ID
      if (Array.isArray(newVal)) {
        const newIds = newVal.map(item => 
          typeof item === 'object' && item !== null ? (item[props.valueKey] || item.value || '') : item
        );
        if (JSON.stringify(newIds) !== JSON.stringify(selectedOwnerIds.value)) {
          selectedOwnerIds.value = newIds;
        }
      } else if (!newVal && selectedOwnerIds.value.length > 0) {
        selectedOwnerIds.value = [];
      }
    } else {
      // 单选：从对象中提取ID
      const newId = typeof newVal === 'object' && newVal !== null 
        ? (newVal[props.valueKey] || newVal.value || '') 
        : newVal;
      if (newId !== selectedOwnerIds.value) {
        selectedOwnerIds.value = newId;
      }
    }
  } else {
    // 原有逻辑处理
    if (props.multiple) {
      // 多选模式：确保值是数组
      const newValArray = Array.isArray(newVal) ? newVal : newVal ? [newVal] : []
      if (JSON.stringify(newValArray) !== JSON.stringify(selectedOwnerIds.value)) {
        selectedOwnerIds.value = newValArray
      }
    } else {
      // 单选模式：直接赋值，不需要数组包装
      if (newVal !== selectedOwnerIds.value) {
        selectedOwnerIds.value = newVal
      }
    }
  }
}, { deep: true })

// 监听内部值变化，同步到外部
watch(() => selectedOwnerIds.value, (newVal) => {
  if (props.objectMode) {
    // 对象模式处理
    if (props.multiple) {
      // 多选模式：返回对象数组
      const selectedObjects = newVal.map(id => {
        const option = ownerOptions.value.find(item => item.value === id);
        return option ? option.rawData : { [props.valueKey]: id };
      });
      emit('update:modelValue', selectedObjects);
    } else {
      // 单选模式：返回单个对象
      const option = ownerOptions.value.find(item => item.value === newVal);
      const selectedObject = option ? option.rawData : newVal ? { [props.valueKey]: newVal } : null;
      emit('update:modelValue', selectedObject);
    }
  } else {
    // 原有逻辑处理
    const valueToEmit = props.multiple ? newVal : newVal;
    emit('update:modelValue', valueToEmit);
  }
}, { deep: true })

// 获取货主列表
const fetchOwnerList = async (keyword = '') => {
  try {
    // 构建查询参数
    const params = {
      cargoOwnerName: keyword,
      cargoownerId: '',
      enableFlag: props.enableFlag, // 根据属性决定是否只查询启用状态的货主
      memberId: 0
    }
    const res = await getOwnerList(params)
    if (res && (res.code === '200' || res.code === 200)) {
      // 处理货主列表数据
      const ownerList = res.data || []
      ownerOptions.value = ownerList.map(item => ({
        label: item[props.labelKey] || item.cargoOwnerName,
        value: item[props.valueKey] || item.recId, // 使用自定义字段或默认recId作为value值
        rawData: item // 保存原始数据
      }))
    }
  } catch (error) {
    console.error('获取货主列表失败', error)
    ElMessage.error('获取货主列表失败')
  }
}

// 处理货主搜索，使用防抖函数减少请求次数
const handleOwnerSearch = debounce((query) => {
  if (query) {
    ownerSearchLoading.value = true
    fetchOwnerList(query).finally(() => {
      ownerSearchLoading.value = false
    })
  } else {
    fetchOwnerList()
  }
}, 300)

// 处理货主变化事件
const handleOwnerChange = (val) => {
  // 获取选中的货主详细数据
  let selectedData = null;
  
  if (props.multiple) {
    // 多选模式：返回选中项的完整数据数组
    selectedData = val.map(id => {
      const option = ownerOptions.value.find(item => item.value === id);
      return option ? {
        id: option.value,
        label: option.label,
        ownerId: option.ownerId,
        // 返回原始数据
        rawData: option.rawData || option
      } : { id };
    });
  } else {
    // 单选模式：返回单个选中项的完整数据
    const option = ownerOptions.value.find(item => item.value === val);
    selectedData = option ? {
      id: option.value,
      label: option.label,
      ownerId: option.ownerId,
      // 返回原始数据
      rawData: option.rawData || option
    } : null;
  }
  
  // 触发change事件，同时传递选中值和详细数据
  emit('change', val, selectedData);
}

// 获取货主详细信息（用于回显）
const fetchOwnerDetails = async (ownerIds) => {
  if (!ownerIds || (Array.isArray(ownerIds) && ownerIds.length === 0)) return
  
  try {
    ownerSearchLoading.value = true
    // 构建查询参数，如果使用自定义valueKey，这里可能需要调整查询方式
    const params = {
      pageSize: 100,
      pageNum: 1
    }
    
    // 构造查询条件，假设后端API支持通过valueKey字段查询
    if (props.valueKey === 'recId') {
      params.recIds = Array.isArray(ownerIds) ? ownerIds.join(',') : ownerIds
    } else {
      // 根据实际API支持的方式调整，可能需要多个查询或者自定义参数
      params[`${props.valueKey}s`] = Array.isArray(ownerIds) ? ownerIds.join(',') : ownerIds
    }
    
    const res = await getOwnerList(params)
    
    if (res.code === '200' && res.data) {
      // 将获取到的货主数据转换为选项格式并添加到选项列表中
      const ownerData = res.data.map(item => ({
        value: item[props.valueKey] || item.recId,
        label: item[props.labelKey] || item.cargoOwnerName,
        rawData: item // 保存原始数据
      }))
      
      // 确保不重复添加
      ownerData.forEach(item => {
        if (!ownerOptions.value.some(option => option.value === item.value)) {
          ownerOptions.value.push(item)
        }
      })
    }
  } catch (error) {
    console.error('获取货主详情失败', error)
  } finally {
    ownerSearchLoading.value = false
  }
}

// 暴露方法给父组件使用
defineExpose({
  fetchOwnerList,
  fetchOwnerDetails
})

// 组件挂载时加载数据
onMounted(() => {
  // 初始加载货主列表
  fetchOwnerList()
  
  // 如果已有选中的货主ID，加载对应的详情
  if (selectedOwnerIds.value && 
     (Array.isArray(selectedOwnerIds.value) ? selectedOwnerIds.value.length > 0 : selectedOwnerIds.value)) {
    fetchOwnerDetails(selectedOwnerIds.value)
  }
})
</script>

<style lang="scss" scoped>
/* 可能的特定样式 */
</style> 